
import { ImportOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Breadcrumb, Drawer, Modal } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

import { open } from '@tauri-apps/plugin-dialog';
import { IconsHeader } from '@/components';
import { ConnectorDataSource, metaDataImportDomain } from '@/services';
import { DataDomainTable, DomainEditor } from './components';
import { transformDomainImport } from '@/services/local';
import { homePath } from '@/utils';

export const DataDomainsPage = (props: any) => {

    const [isModalOpen, setIsModalOpen] = useState(false);

    const [dataOpen, setDataOpen] = useState<boolean>(false);

    const [loading, setLoading] = useState<boolean>(false);

    const [action, setAction] = useState<string>('');

    const navigate = useNavigate();

    return (
        <Container style={props.style}>
            <Header>
                <IconsHeader
                    style={{
                        borderBottom: '1px solid #DEDEDE'
                    }}
                    activeKey={action}
                    itemSize={30}
                    leftItems={[
                        {
                            key: '返回',
                            label: '返回',
                            icon: <LeftOutlined />,
                            isAction: true,
                        },
                        {
                            key: '添加',
                            label: '添加',
                            icon: <PlusOutlined />,
                            isAction: true,
                        },
                        {
                            key: '导入',
                            label: '导入',
                            icon: <ImportOutlined />,
                            isAction: true,
                        }
                    ]}
                    rightItems={[
                    ]}
                    onChange={async (key: string, isAction?: boolean) => {
                        if (isAction) {
                            //删除
                            if (key === '返回') {
                                //返回
                                navigate('/data/metadata');
                            } else if (key === '添加') {
                                //返回
                                setIsModalOpen(true);
                            } else if (key === '导入') {
                                //返回
                                const file: any = await open({
                                    multiple: false,
                                    directory: false,
                                    filters: [{
                                        name: 'zip',
                                        extensions: ['zip']
                                    }],
                                }) as any;
                                if (!file) {
                                    return null;
                                }
                                //C:\Users\jinisu\Downloads\mysql知识域.zip
                                console.log(file);
                                let home = await homePath();

                                let target: ConnectorDataSource = {
                                    id: 0,
                                    protocol: 'sqlite',
                                    url: `sqlite:${home}/rrg01.sqlite`,
                                    database_type: 'sqlite',
                                };
                                let res = await transformDomainImport(file, target, [{ domain_identifier: '' }], {
                                    ignore_errs: true,
                                    file_options: {
                                        version: 'V1.0.0',
                                        format: 'sqlite'
                                    }
                                });
                            }
                        } else {
                            setAction(key);
                        }
                    }}></IconsHeader>
                <Breadcrumb
                    style={{
                        padding: '0px 10px',
                        backgroundColor: '#DEDEDE',
                        height: '30px'
                    }}
                    items={[
                        {
                            title: <div style={{ cursor: 'pointer' }} onClick={() => {
                                navigate('/data/metadata');
                            }}>元数据</div>,
                        },
                        {
                            title: '域管理',
                        },
                    ]}
                />
            </Header>
            <Content>
                <DataDomainTable></DataDomainTable>
            </Content>
            <Drawer
                title="数据统计"
                onClose={() => {
                    setDataOpen(false);
                }}
                width={'calc(100% - 220px)'}
                destroyOnClose={true}
                open={dataOpen}>
            </Drawer>
            <Modal title="添加域" footer={false} open={isModalOpen} onOk={() => {
                setIsModalOpen(false);
            }} onCancel={() => {
                setIsModalOpen(false);
            }}>
                <DomainEditor onFinish={async () => {
                    setIsModalOpen(false);
                }}></DomainEditor>
            </Modal>
        </Container>
    );
}


const EmptyContainer = styled.div`
    height: 100%;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 10px;
    background-color: #FFFFFF;
`;

const Header = styled.div`
    height: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
`;

const Content = styled.div`
    flex:1;
    width: 100%;
    overflow: auto;
    background-color: #ffffff;
`;

const IconContainer = styled.div`
    border-radius: 6px;
    width: 60px;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #ff7875;
`;

const Icon = styled.img`
    border-radius: 6px;
    width: 60px;
    height:60px;
`;

const ApplicationDescription = styled.div`
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical; 
`;
